<template>
    <div>
        <el-dialog :title="dialogInfo.isAdd ? '添加商品管理' : '编辑商品管理'" :visible.sync="dialogInfo.isShow"
            :before-close="cancel" center>
            <el-form :model="seckInfo" :rules="rules" ref="seckInfo">
                <el-form-item label="活动名称" :label-width="formLabelWidth" prop="title">
                    <el-input v-model="seckInfo.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="活动期限" label-width="formLabelWidth">
                    <el-date-picker @change="gettime" v-model="timer" type="datetimerange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" align="right">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="一级分类" :label-width="formLabelWidth" prop="first_cateid">
                    <el-select v-model="seckInfo.first_cateid" placeholder="请选择" @change="changeCate(false)">
                        <el-option v-for="item in catelist" :value="item.id" :key="item.id" :label="item.catename">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级分类" :label-width="formLabelWidth" prop="second_cateid">
                    <el-select v-model="seckInfo.second_cateid" placeholder="请选择" @change="changegoods(false)">
                        <el-option v-for="item in secondArr" :value="item.id" :key="item.id" :label="item.catename">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品" :label-width="formLabelWidth" prop="goodsid">
                    <!-- multiple 是否多选 -->
                    <el-select v-model="seckInfo.goodsid" placeholder="请选择">
                        <el-option v-for="item in goodslist" :value="item.id" :key="item.id" :label="item.goodsname">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="seckInfo.status" active-color="#13ce66" inactive-color="#ff4949"
                        :active-value="1" :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { seckadd, goodslist, seckinfo, seckedit } from '../../request/api'
export default {
    props: ['dialogInfo'],
    data() {
        return {
            seckInfo: {
                title: '',//限时秒杀名称
                begintime: '',//开始时间
                endtime: '',//结束时间
                first_cateid: '',//一级分类编号
                second_cateid: '',//二级分类编号
                goodsid: '',//商品编号
                status: 1, //状态1正常2禁用
            },
            secondArr: [],  //设置二级分类数据
            timer: [],
            goodslist: [],
            formLabelWidth: "80px", //label宽度
            rules: {
                title: [
                    { required: true, message: "请输入商品名称", trigger: "blur" },
                    {
                        min: 2,
                        max: 10,
                        message: "长度在 2 到 10 个字符",
                        trigger: "blur",
                    },
                ],
                first_cateid: [
                    { required: true, message: "请选择一级分类", trigger: "change" },
                ],
                second_cateid: [
                    { required: true, message: "请选择二级分类", trigger: "blur" },
                ],
                goodsid: [
                    { required: true, message: "请选择商品", trigger: "change" },
                ],
            },
        };
    },
    computed: {
        ...mapGetters({
            catelist: 'cate/getCalist',
            specslist: 'specs/getSpecsList',
            seckList: 'seck/getSeckList'
        })
    },
    mounted() {
        this.getCate()
        this.getSpecs()
        this.getSeck()
    },
    methods: {
        ...mapActions({
            getCate: 'cate/changeCateAction',
            getSpecs: 'specs/getSpecsListAction',
            getSeck: 'seck/changeSeckAction'
        }),
        gettime() {
            this.seckInfo.begintime = this.timer[0]
            this.seckInfo.endtime = this.timer[1]
            console.log(this.timer);
        },
        cancel() {
            this.$emit('cancel', false),
                this.reset()
        },
        reset() {
            this.seckInfo = {
                title: '',//限时秒杀名称
                begintime: '',//开始时间
                endtime: '',//结束时间
                first_cateid: '',//一级分类编号
                second_cateid: '',//二级分类编号
                goodsid: '',//商品编号
                status: 1, //状态1正常2禁用
            }
            this.$refs.seckInfo.resetFields();
        },
        lookup(id) {
            seckinfo({ id }).then((res) => {
                this.seckInfo = res.data.list;
                this.seckInfo.id = id;
                this.changeCate(true);
                this.changegoods(true);
                this.timer = [
                    new Date(parseInt(this.seckInfo.begintime)),
                    new Date(parseInt(this.seckInfo.endtime))
                ]
            })
        },
        changeCate(n) {
            let index = this.catelist.findIndex((item) => item.id == this.seckInfo.first_cateid)
            this.secondArr = this.catelist[index].children;
            if (!n) {
                this.seckInfo.second_cateid = ''
                this.seckInfo.goodsid = ''
            }
        },
        changegoods(n) {
            goodslist({
                fid: this.seckInfo.first_cateid,
                sid: this.seckInfo.second_cateid
            }).then((res) => {
                if (res.data.code == 200) {
                    console.log(res);
                    this.goodslist = res.data.list
                }
            })
            if (!n) {
                this.seckInfo.goodsid = ''
            }
        },
        confirm() {
            this.$refs.seckInfo.validate((valid) => {
                if (valid) {
                    this.seckInfo.begintime = new Date(this.timer[0]).getTime();
                    this.seckInfo.endtime = new Date(this.timer[1]).getTime();
                    if (this.dialogInfo.isAdd) {
                        seckadd(this.seckInfo).then((res) => {
                            if (res.data.code == 200) {
                                console.log(res);
                                this.getSeck()
                                this.cancel()
                                this.$message.success(res.data.msg);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                    } else {
                        seckedit(this.seckInfo).then((res) => {
                            if (res.data.code == 200) {
                                console.log(res);
                                this.getSeck()
                                this.cancel()
                                this.$message.success(res.data.msg);
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        })
                    }
                } else {
                    this.$message.error("验证失败");
                    return false;
                }
            })
        }

    }
};
</script>

<style scoped>
/* .time{
    width: 40%;
    height: 100px;
} */
</style>
